<template>
	<view class="outer">
		<view class="logo">
			<view class="logo-size">
				<view class="size-one">3.50</view>
				<view class="size-two">业绩比较基准</view>
			</view>
			<view class="flex-size">
				<view class="left-flex">
					<view class="left-son-one">28</view>
					<view class="left-son-two">产品期限(天)</view>
				</view>
				<view class="right-flex">
					<view  class="left-son-one">50000</view>
					<view class="left-son-two">起购价格</view>
				</view>
			</view>
		</view>
		<view class="contet">
			<view class="top-title">
				<text>投资周期</text>
			</view>
			<view class="content">
				<view class="content-son">
					<view class="item1">
						<text class="text1"></text><text  class="text2"></text>
						<text class="grey"></text><text  class="text2"></text>
						<text class="grey"></text><text  class="text2"></text>
						<text class="grey"></text><text  class="text3"></text>
					</view>
					<view class="item2">
						<view class="item2-view">
							<view>购买</view>
							<view>2021/3/15</view>
						</view>
						<view class="item2-view">
							<view>计算收益</view>
							<view>2021/3/18</view>
						</view>
						<view class="item2-view">
							<view>发放收益</view>
							<view>2021/4/10</view>
						</view>
						<view class="item2-view">
							<view>到账</view>
							<view>两个交易日内</view>
						</view>
					</view>
					<view class="item3">
						<view class="item3-left">购买说明</view>
						<view class="item3-right">
							<view class="right-view">每28天为一期，可在到期开放日追加购买或领取；若位领取则默认持续存至下一期</view>
							<view class="right-view">*若当期实际期限以投资周期展示为准，收益按当期实际计息天数计算</view>
						</view>
					</view>
				</view>
			</view>
			<view class="content2">
				<view class="content2-son">
					<view class="top-title">
						<text>安全保障</text>
					</view>
					<view class="content2-item">
						<view class="items">
							<view>
								<image src="../../static/image/detailsYP/home.png" mode=""></image>
							</view>
							<view class="items-content">知识金融机构</view>
						</view>
						<view  class="items">
							<view>
								<image src="../../static/image/detailsYP/search.png" mode=""></image>
							</view>
							<view class="items-content">精选优质产品</view>
						</view>
						<view  class="items">
							<view>
								<image src="../../static/image/detailsYP/protect.png" mode=""></image>
							</view>
							<view class="items-content">监管机构备选</view>
						</view>
					</view>
					<view class="content2-bottom">
						该产品属于债券型资源产品，风险较低
					</view>
				</view>
			</view>
			<view class="tabbar">
				<view class="tabbar-son" v-for="item in arr" :key="item.id" @click="tabbarClick(item.id)">
					<view :class="[item.type?'active':'deactive']">{{item.name}}</view>
					<view class="defied" v-if="item.type"></view>
				</view>
			</view>
			<view :class="'swiper-father'+currentTab">
				<swiper :current="currentTab" @change="currentTabChange" class="swiper">
					<swiper-item>
						<view class="swiper-item-father">
							<view class="swiper-item-first">
								购买与领取
							</view>
							<view class="swiper-item-item1 item1-flex">
								<view class="flex-left-item1">购买金额</view><view class="flex-right-item1">50000元起购</view>
							</view>
							<view class="swiper-item-item1 item1-flex">
								<view class="flex-left-item1">领取金额</view><view class="flex-right-item1">剩余金额不低于1000元</view>
							</view>
							<view class="swiper-item-item1 item1-flex">
								<view class="flex-left-item1">到账说明</view><view class="flex-right-item1">
									<text>资金将在领取后的2个交易日内回到原购买银行卡</text>
								</view>
							</view>
							<view class="swiper-item-item2 item1-flex">
								<view class="flex-left-item1">开发日</view>
								<view class="flex-right-item2">
									<text>可在开放日10-15点领取，也可在开放日之前预约领取，若未领取则默认续存至下一期。如开发日遇到非交易日，可能顺延或提前开发，手机按实际天数计算</text>
								</view>
							</view>
							<view class="swiper-item-two">
								收益与费用
							</view>
							<view class="swiper-item-item2 item1-flex">
								<view class="flex-left-item1">收益规则</view>
								<view class="flex-right-item3">
									<text>购买的下一个交易日开始计算收益，节假日照常计算，收益每日积累，按周期发放（28天），现金收益将在两个交易日内直接发放至原购买银行卡。</text>
								</view>
							</view>
							<view class="swiper-item-item1 item1-flex">
								<view class="flex-left-item1">费用规则</view><view class="flex-right-item1">购买及领取均无手续费</view>
							</view>
							<view class="footer">
								<view class="swiper-item-three">
									支持银行列表
								</view>
								<view class="banklist">
									<view class="title">银行列表</view>
									<view class="title">单笔限额(元)</view>
									<view class="title">单日限额(元)</view>
								</view>
								<view class="img-flex">
									<template v-for="item in imgArr">
										<view :key="item.id" class="listimg">
											<image :src="item.name" mode=""></image>
											<text class="imgfirst">{{item.text1}}</text>
										</view>
										<view class="listimg">{{item.text2}}</view>
										<view class="listimg">{{item.text3}}</view>
									</template>
								</view>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<information></information>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<problem></problem>
						</view>
					</swiper-item>
				</swiper>
				<view class="calculator">
					<view class="calculatorImg" @click="open">
						<image src="../../static/image/detailsYP/jisuan.png" mode=""></image>
					</view>
					<view class="calculatorview2" @click="buy">立即购买</view>
				</view>
			
				<uni-popup ref="popup" :mask-click="false">
				    <view class="group">
						<view class="group-text">
							<text class="text-groun-one">收益计算器</text>
							<image class="group-img"  @click="close" src="../../static/image/detailsYP/x.png" mode=""></image>
						</view>
						<view class="group-item">
							<view class="touzi">投资金额(元)</view>
							<input type="number" value="" />
						</view>
						<view class="group-item">
							<view class="touzi">据业绩比较基准28天后可赚</view>
							<input type="number" value="" />
						</view>
						<view  class="btn" @click="close">返回</view>
					</view>
					
				   <!-- <button @click="close">关闭</button> -->
				</uni-popup>
			</view>
		</view>
	</view>
</template>

<script>
	import information from "./information.vue";
	import problem  from "./problem.vue"
	export default {
		data(){
			return {
				arr:[
					{id:0,name:"交易规则",type:true},
					{id:1,name:"信息披露",type:false},
					{id:2,name:"常见问题",type:false},
				],
				imgArr:[
					{id:0,name:"/static/image/detailsYP/gs.png",text1:'工行',text2:'5万',text3:'5万'},
					{id:1,name:"/static/image/detailsYP/ny.png",text1:'农行',text2:'5000',text3:'5000'},
					{id:2,name:"/static/image/detailsYP/zh.png",text1:'中行',text2:'20万',text3:'20万'},
					{id:3,name:"/static/image/detailsYP/js.png",text1:'建行',text2:'10万',text3:'10万'},
					{id:4,name:"/static/image/detailsYP/jt.png",text1:'交行',text2:'10万',text3:'10万'},
					{id:5,name:"/static/image/detailsYP/zs.png",text1:'招行',text2:'5000',text3:'5000'},
					{id:6,name:"/static/image/detailsYP/gf.png",text1:'广发',text2:'300万',text3:'300'},
					{id:7,name:"/static/image/detailsYP/pa.png",text1:'平安',text2:'5万',text3:'5万'},
				],
				currentTab:0
			}
		},
		components:{
			information,problem
		},
		methods:{
			tabbarClick(id){
				this.currentTab = id;
				this.arr.forEach(item => {
					if(item.id == id){
						item.type = true;
					}else{
						item.type = false;
					}
				})
			},
			currentTabChange(e){
				let id = e.detail.current;
				this.arr.forEach(item => {
					if(item.id == id){
						item.type = true;
					}else{
						item.type = false;
					}
				})
			},
			open() {
			    this.$refs.popup.open('bottom')
			},
			close() {
			    this.$refs.popup.close()
			},
			buy(){
				uni.navigateTo({
					url:'../earnings/earnings'
				})
			}
		}
	}
</script>

<style scoped>
	.logo {
		height: 350rpx;
		background-image: url('../../static/image/detailsYP/bglogo.png');
		background-position: center center;
		border-top: 1px solid transparent;
	}

	.logo-size {
		text-align: center;
	}

	.size-one {
		font-size: 60rpx;
		color: #FFFFFF;
		margin-top: 29rpx;
		font-weight: bold;
	}

	.size-two {
		font-size: 24rpx;
		color: #FFFFFF;
		margin-top: 22rpx;
	}

	.flex-size {
		display: flex;
		justify-content: space-around;
		margin-top: 19rpx;
	}

	.left-son-one {
		font-size: 40rpx;
		color: #FFFFFF;
		font-weight: bold;
		text-align: center;
	}
	.left-son-two{
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: center;
		margin-top: 10rpx;
	}
	.contet{
		margin: 0 auto;
		height: 156vh;
		background-color: #F8F8F8;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		position: relative;
		z-index: 2;
		top: -37rpx;
	}
	.content-son{
		width: 710rpx;
		background-color: #FFFFFF;
		margin: 0 auto;
		border-radius: 20rpx;
	}
	.top-title{
		margin: 0 auto;
		width: 710rpx;
		height: 71rpx;
		line-height: 71rpx;
		padding: 26rpx 0rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}
	.top-title text:nth-child(1){
		font-size: 30rpx;
		font-weight: bold;
		margin-left: 8rpx;
		border-left: 10rpx solid #3476f1;
		padding-left: 14rpx;
	}
	.content{
		height: 500rpx;
		margin-top: 15rpx;
	}
	.item1{
		width: 710rpx;
		margin: 0 auto;
		padding-left: 81rpx;
		padding-top: 40rpx;
		padding-bottom: 36rpx;
	}
	.text1{
		display: inline-block;
		width: 20rpx;
		height: 20rpx;
		background-color: #3476f1;
		border-radius: 50%;
		vertical-align: middle;
	}
	.text2{
		display: inline-block;
		width: 157rpx;
		border: 1px dashed #CCCCCC;
		vertical-align: middle;
	}
	.text3{
		display: inline-block;
		width: 30rpx;
		border: 1px dashed #CCCCCC;
		vertical-align: middle;
	}
	.grey{
		display: inline-block;
		width: 16rpx;
		height: 16rpx;
		border: 1px solid #C8C7CC;
		border-radius: 50%;
		vertical-align: middle;
	}
	.item2{
		width: 700rpx;
		margin: 0 auto;
		border-bottom: 1px solid #CCCCCC;
		display: flex;
		padding-bottom: 30rpx;
	}
	.item2-view view:nth-child(1){
		font-size: 24rpx;
		color: #666666;
	}
	.item2-view view:nth-child(2){
		font-size: 24rpx;
		color: #999999;
		margin-top: 18rpx;
	}
	.item2-view{
		width: 25%;
		text-align: center;
	}
	.item3{
		display: flex;
		padding-bottom: 30rpx;
	}
	.item3-left{
		width: 22%;
		font-size: 30rpx;
		color: #999999;
		margin: 40rpx 10rpx;
		padding-left: 10rpx;
	}
	.item3-right{
		width: 69%;
		font-size: 24rpx;
		color: #333333;
		margin-top: 40rpx;
	}
	.right-view{
		line-height: 50rpx;
	}
	.content2-son{
		margin-top: 15rpx;
	}
	.content2-item{
		display: flex;
		justify-content: space-evenly;
		margin: 0 auto;
		margin-top: 15rpx;
		background-color: #FFFFFF;
		border-bottom: 1px solid #CCCCCC;
		width: 700rpx;
	}
	.content2-item image{
		width: 94rpx;
		height: 94rpx;
	}
	.items{
		width: 30%;
		text-align: center;
		margin-top: 40rpx;
	}
	.items-content{
		margin: 30rpx 0rpx;
		font-size: 24rpx;
		color: #666666;
	}
	
	.content2-bottom{
		font-size: 24rpx;
		color: #333333;
		width: 700rpx;
		padding: 30rpx 0rpx;
		background-color: #FFFFFF;
		margin: 0 auto;
		padding-left: 77rpx;
	}
	.tabbar{
		display: flex;
		/* border: 1px solid red; */
		width: 710rpx;
		margin: 15rpx auto;
		height: 120rpx;
		line-height: 120rpx;
		font-size: 32rpx;
		background-color: #FFFFFF;
	}
	.tabbar-son{
		width: 23%;
		/* border: 1px solid red; */
		text-align: center;
	}
	.active{
		color: #3476F1;
		font-weight: bold;
		height: 100rpx;
	}
	.deactive{
		color: #999999;
		height: 100rpx;
		font-size: 24rpx;
	}
	.defied{
		width: 60rpx;
		border: 1px solid #3476F1;
		margin-left: 56rpx;
	}
	.swiper-father0{
		background-color: #F8F8F8;
		height: 100%;
	}
	.swiper-father1{
		background-color: #F8F8F8;
		height: 89%;
	}
	.swiper-father2{
		background-color: #F8F8F8;
		height: 50%;
	}
	
	.swiper{
		border-radius: 30rpx;
		margin: 0 auto;
		height: 100%;
		
		
	}
	.swiper-item-father{
		width: 710rpx;
		margin: 0 auto;
	}
	.swiper-item-item1{
		font-size: 28rpx;
		color: #333333;
		padding-left: 40rpx;
		height: 120rpx;
		border-bottom: 1px solid #CCCCCC;
		background-color: #FFFFFF;
		padding-top: 30rpx;
	}
	.swiper-item-first{
		font-size: 32rpx;
		color: #333333;
		padding-left: 40rpx;
		height: 110rpx;
		line-height: 80rpx;
		border-bottom: 1px solid #CCCCCC;
		background-color: #FFFFFF;
		padding-top: 30rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}
	.item1-flex{
		display: flex;
	}
	.flex-left-item1{
		color: #999999;
		white-space: nowrap;
	}
	.flex-right-item1{
		margin-left: 30rpx;
		border-radius: 20rpx;
	}
	.swiper-item-item2{
		font-size: 28rpx;
		color: #333333;
		padding: 30rpx 40rpx;
		/* height: 200rpx; */
		background-color: #FFFFFF;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
	}
	.flex-right-item2{
		padding-left: 54rpx;
		letter-spacing: 3rpx;
		
	}
	.swiper-item-two{
		font-size: 32rpx;
		color: #333333;
		padding-left: 40rpx;
		
		height: 110rpx;
		line-height: 80rpx;
		border-bottom: 1px solid #CCCCCC;
		background-color: #FFFFFF;
		padding-top: 30rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		margin-top: 40rpx;
	}
	.footer{
		margin: 0 auto;
		width: 710rpx;
		background-color: #FFFFFF;
	}
	.flex-right-item3{
		padding-left: 30rpx;
		letter-spacing: 3rpx;
	}
	.banklist{
		width: 629rpx;
		display: flex;
		align-items: center;
		margin: 0 auto;
		flex-wrap: wrap;
	}
	.banklist .title{
		height: 42rpx;
		line-height: 42rpx;
		margin-top: 24rpx;
		border: 1px solid #CCCCCC;
		box-sizing: border-box;
		
	}
	.banklist>view{
		width: 33.3%;
		text-align: center;
		font-size: 28rpx;
		color: #999999;
	}
	.img-flex{
		display: flex;
		flex-wrap: wrap;
		margin: 0 auto;
		width: 628rpx;
		flex-grow: 1;
		padding-bottom: 30rpx;
	}
	
	 .listimg{
		 box-sizing: border-box;
		 border: 1px solid #CCCCCC;
		 width: 33%;
		
		height: 50rpx;
		line-height: 50rpx;
		font-size: 28rpx;
		color: #999999;
		text-align: center;
	}
	.listimg image{
		width: 30rpx;
		height: 30rpx;
		position: relative;
		left: 10rpx;
	}
	.imgfirst{
		margin-left: 20rpx;
	}
	.swiper-item-three{
		font-size: 32rpx;
		color: #333333;
		padding-left: 40rpx;
		height: 80rpx;
		line-height: 80rpx;
		padding-top: 30rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		margin-top: 40rpx;
	}
	.calculator{
		background-color: #F8F8F8;
		position: fixed;
		bottom: 0;
		width: 750rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		padding-bottom: 50rpx;
		padding-top: 25rpx;
	}
	.calculatorImg{
		width: 150rpx;
	}
	.calculatorImg image{
		width: 30rpx;
		height: 43rpx;
		margin-left: 57rpx;
		margin-top: 27rpx;
		scale: 1.1;
	}
	.calculatorview2{
		width: 640rpx;
		height: 88rpx;
		background-color: #3476F1;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	}
	.group{
		width: 700rpx;
		height: 523rpx;
		margin: 0 auto;
		background-color: #f3f3f3;
		margin-bottom: 40rpx;
		border-top: 1px solid transparent;
	}
	.group-text{
		text-align: center;
		font-size: 28rpx;
		color: #333333;
		margin-top: 40rpx;
		
	}
	.group-item{
		width: 550rpx;
		margin: 0 auto;
	}
	.touzi{
		font-size: 28rpx;
		color: #999999;
		margin-top: 48rpx;
	}
	input{
		/* width: ; */
		background-color: #FFFFFF;
		height: 64rpx;
		border-radius: 10rpx;
		margin-top: 14rpx;
	}
	.btn{
		margin-top: 30rpx;
		background-color: #e1e1e1;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 28rpx;
		color: #333333;
	}
	.text-groun-one{
		vertical-align: middle;
		margin-left: 75rpx;
	}
	.group-img{
		width: 50rpx;
		height: 50rpx;
		position: relative;
		left: 147rpx;
		vertical-align: middle;
	}
</style>
